<!--
 * @Description:
 * @Author: william
 * @Date: 2025-02-17 16:47:40
 * @LastEditors: william
 * @LastEditTime: 2025-04-11 17:48:41
-->
<template>
  <BaseDialog
    v-model="dialogVisible"
    :title="g_t('public.create')"
    width="850px"
    :before-close="handleClose"
  >
    <el-form
      ref="refDialogForm"
      v-loading="formLoading"
      class="set-dialog-form"
      :label-width="language === 'en' ? '180px' : '80px'"
      :model="formData"
      :rules="rules"
    >
      <el-row>
        <el-divider>
          <div class="col-title">{{ $t('userCenter.deptInfo') }}</div>
        </el-divider>
        <el-col :span="12">
          <el-form-item :label="$t('userCenter.parentDept')" prop="superDeptId">
            <CascaderDept
              v-model="formData.superDeptId"
              v-model:id="localDeptId"
              style="width: 100%"
              :label="$t('userCenter.parentDept')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('userCenter.deptName')" prop="deptName">
            <TextInput
              v-model="formData.deptName"
              :label="$t('userCenter.deptName')"
              :maxlength="32"
            />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item :label="$t('userCenter.deptId')" prop="identifier">
            <TextInput
              v-model="formData.identifier"
              :label="$t('userCenter.deptId')"
            />
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item :label="$t('userCenter.displayOrder')" prop="deptOrder">
            <TextInput
              v-model="formData.deptOrder"
              :label="$t('userCenter.displayOrder')"
              :maxlength="4"
              verify-type="nzint"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('public.remark')" prop="deptDesc">
            <TextInput
              v-model="formData.deptDesc"
              type="textarea"
              :rows="2"
              :label="$t('public.remark')"
            />
          </el-form-item>
        </el-col>
        <el-divider>
          <div class="col-title">{{ $t('userCenter.adminInfo') }}</div>
        </el-divider>
        <el-col :span="12">
          <el-form-item :label="$t('public.userName')" prop="userName">
            <InputUserName v-model="formData.userName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('public.userNickName')" prop="nickName">
            <TextInput
              v-model="formData.nickName"
              :label="$t('public.userNickName')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('public.password')" prop="password">
            <TextInput
              v-model="formData.password"
              :label="$t('public.password')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('public.confirmPassword')"
            prop="confirmPassword"
          >
            <TextInput
              v-model="formData.confirmPassword"
              :label="$t('public.confirmPassword')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('public.phone')" prop="phone">
            <InputPhone v-model="formData.phone" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('public.email')" prop="email">
            <TextInput v-model="formData.email" :label="$t('public.email')" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="form-dialog-footer">
        <el-button plain @click="handleClose">{{
          $t('public.cancel')
        }}</el-button>
        <el-button type="primary" @click="handleSubmitForm">{{
          $t('public.confirm')
        }}</el-button>
      </div>
    </template>
  </BaseDialog>
</template>

<script setup>
const props = defineProps({
  deptId: {
    type: String,
    default: ''
  },
  id: {
    type: String,
    default: ''
  }
})
const localDeptId = ref(props.deptId)

const emit = defineEmits(['update'])
const dialogVisible = defineModel({
  type: Boolean,
  default: false
})
const { language } = storeToRefs(useAppStore())

const refDialogForm = ref(null)
const formLoading = ref(false)
const formData = ref({
  superDeptId: [],
  deptName: '',
  // identifier: '',
  deptOrder: '',
  deptDesc: '',
  userName: '',
  nickName: '',
  password: '',
  confirmPassword: '',
  phone: '',
  email: ''
})
const rules = {
  superDeptId: g_rules.selectRule(g_t('userCenter.parentDept')),
  deptName: g_rules.commonInputText(g_t('userCenter.deptName')),
  // identifier: g_rules.commonInputText(g_t('userCenter.deptId')),
  deptOrder: g_rules.commonInputText(g_t('userCenter.displayOrder')),
  // deptDesc: g_rules.commonInputText(g_t('public.remark')),
  userName: g_rules.userName,
  nickName: g_rules.commonInputText(g_t('public.nickName')),
  password: g_rules.password,
  confirmPassword: g_rules.confirmPassword(formData.value, 'password'),
  phone: g_rules.phone({
    required: false
  }),
  email: g_rules.email({
    required: false
  })
}

onMounted(() => {
  //
})

const handleClose = () => {
  dialogVisible.value = false
}

const handleSubmitForm = () => {
  if (formLoading.value) return
  refDialogForm.value.validate(valid => {
    const { superDeptId } = formData.value
    // console.log('handleSubmitForm', {
    //   ...formData.value,
    //   parentId: superDeptId[superDeptId.length - 1] || '',
    //   superDeptId: superDeptId.join(',')
    // })
    if (!valid) return
    formLoading.value = true
    g_api.userCenter
      .apiDeptCreate({
        ...formData.value,
        parentId: superDeptId[superDeptId.length - 1] || '',
        superDeptId: superDeptId.join(',')
      })
      .then(res => {
        if (res.code === '200') {
          ElMessage({
            message: res.message,
            type: 'success'
          })
          handleClose()
          emit('update')
        }
      })
      .finally(() => {
        formLoading.value = false
      })
  })
}
</script>

<style scoped lang="scss"></style>
